<template>
    <v-form-designer ref="vfDesigner" :designer-config="designerConfig">
        <!-- 自定义按钮插槽演示 -->
        <template #customToolButtons>
            <el-button type="primary" @click="saveFormJson">在线保存</el-button>
        </template>
    </v-form-designer>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
const vfDesigner = ref(null)

const designerConfig = reactive({
  languageMenu: true,
  exportCodeButton: true,
  generateSFCButton: false,
  //externalLink: false,
  //formTemplates: false,
  //eventCollapse: false,
  //clearDesignerButton: false,
  //previewFormButton: false,

  //presetCssCode: '.abc { font-size: 16px; }',
})

onMounted(() => {
    const json = { "widgetList": [{ "key": 79888, "type": "input", "icon": "text-field", "formItemFlag": true, "options": { "name": "input25936", "label": "UserName", "labelAlign": "", "type": "text", "defaultValue": "", "placeholder": "", "columnWidth": "200px", "size": "", "labelWidth": null, "labelHidden": false, "readonly": false, "disabled": false, "hidden": false, "clearable": true, "showPassword": false, "required": false, "requiredHint": "", "validation": "", "validationHint": "", "customClass": "", "labelIconClass": null, "labelIconPosition": "rear", "labelTooltip": null, "minLength": null, "maxLength": null, "showWordLimit": false, "prefixIcon": "", "suffixIcon": "", "appendButton": false, "appendButtonDisabled": false, "buttonIcon": "custom-search", "onCreated": "", "onMounted": "", "onInput": "", "onChange": "", "onFocus": "", "onBlur": "", "onValidate": "", "onAppendButtonClick": "" }, "id": "input25936" }], "formConfig": { "modelName": "formData", "refName": "vForm", "rulesName": "rules", "labelWidth": 80, "labelPosition": "left", "size": "", "labelAlign": "label-left-align", "cssCode": "", "customClass": [], "functions": "", "layoutType": "PC", "jsonVersion": 3, "onFormCreated": "", "onFormMounted": "", "onFormDataChange": "", "customFormName": "自定义表单名" } };
    vfDesigner.value.setFormJson(json);
})
</script>

<style scoped></style>